<template>
  <div class="top-menu">
    <div class="menus-area">
      <el-menu ref="elMenuRef" :router="true" mode="horizontal" menu-trigger="hover" :key="menuKey" :close-on-click-outside="true" @select="onMenuItemSelect" :default-active="menuActive" :unique-opened="true" :default-openeds="[]">
        <template v-for="menu in menus" :key="menu.index">
          <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.index" :style="{ width: expand ? '200px' : '' }">
            <template #title>
              <el-icon v-if="menu.index && String(menu.index).includes('setting')"><Setting /></el-icon>
              <el-icon v-else> <Menu /> </el-icon>
              <span>{{ menu.title }}</span>
            </template>
            <template v-if="menu.children && menu.children.length > 0">
              <el-menu-item v-for="child in menu.children" :key="child.index" :index="child.index" :class="'left-menu-' + child.index">
                <template #title>
                  <span :title="child.driverDescription ?? ''">{{ child.title }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
          <el-menu-item v-else :index="menu.index">{{ menu.title }}</el-menu-item>
        </template>
      </el-menu>
    </div>
    <!--底部的工具-->
    <div class="build-version">
      <!-- <el-icon><Sunny /></el-icon> -->
      <el-text type="info" :title="buildVersion" @click="goHome">{{ npm_package_version }}</el-text>

      <span v-if="serverClientInfo?.version && npm_package_version && SemVer.gt(serverClientInfo.version, npm_package_version)">有更新</span>

      <el-switch title="切换主题" v-model="ligntTheme" :active-action-icon="Sunny" :inactive-action-icon="Moon" style="--el-switch-on-color: #b1b3b8; --el-switch-off-color: #2c2c2c; --el-switch-border-color: var(--color-border)" @change="ligntThemeChanged" />
      <!-- 缩放 -->
      <!-- <el-switch
        v-model="expand"
        :active-action-icon="DArrowRight"
        :inactive-action-icon="DArrowLeft"
        style="
          --el-switch-on-color: #b1b3b8;
          --el-switch-off-color: #2c2c2c;
          --el-switch-border-color: var(--color-border);
          margin-right: 5px;
        "
      /> -->
    </div>
  </div>
</template>
<script setup lang="ts" name="LeftMenu">
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { Sunny, Moon } from '@element-plus/icons-vue'
import { ChangeHtmlTheme } from '@/common/utils'
import { useHtmlThemeStore } from '@/pages/index/stores/theme'
import { useRouter } from 'vue-router'
import { ElMenu } from 'element-plus'
import axios from 'axios'
import SemVer from 'semver'
// ts写法
withDefaults(
  defineProps<{
    msg?: string // 是否必传
  }>(),
  {
    msg: '默认值'
  }
)
const stores = useHtmlThemeStore()
const { themeLight: ligntTheme } = storeToRefs(stores)
const menus: any[] = [
  {
    title: '首页',
    index: 'home'
  },
  {
    title: '重要功能',
    index: 'main',
    children: [
      { title: '表单', index: 'form' },
      { title: '表格', index: 'table-view' }
    ]
  },
  {
    title: '设置',
    index: 'settings',
    children: [
      { title: '主要设置', index: 'common-settings' },
      { title: '其他', index: 'other' },
      {
        title: '退出',
        index: 'logout'
      }
    ]
  }
]

/**
 * 菜单不折叠
 */
const expand = ref(true)

const router = useRouter()

let menuKey = $ref<number>(1)

let elMenuRef = $ref()
//@ts-ignore
const menuDefaultActive = [] as string[]
//@ts-ignore
let menuLoading = $ref(false)

let menuActive = $ref('home')

const buildVersion = process.env.buildVersion ?? ''

const npm_package_version = process.env.npm_package_version
interface ClientInfo {
  version: string
  buildTime: string
}

let serverClientInfo = $ref<ClientInfo>()

onMounted(() => {
  console.debug(`LeftMenu document.documentElement.classList.contains("dark")`, document.documentElement.classList)

  getClientInfo()
})

watch(
  () => router,
  //@ts-ignore
  (newValue, oldValue) => {
    console.log('watch 已触发', newValue)
  },
  { deep: true }
)

const getClientInfo = () => {
  axios.get('/clientInfo.json?_time=' + new Date().getTime()).then(({ data }: { data: ClientInfo }) => {
    serverClientInfo = data
  })
}

/**
 * @see ligntTheme
 * @param value
 */
const ligntThemeChanged = (value: boolean) => {
  // console.debug('ligntThemeChanged', value)
  ChangeHtmlTheme(value)
}
//@ts-ignore
let mul = computed(() => {
  return ''
})

const onMenuItemSelect = (index: string, indexPath: string[], item: unknown, routeResult: unknown) => {
  ;(window as any).elMenuRef = elMenuRef
  console.debug(index, indexPath, item, routeResult)
  console.log('navigator.userAgent', navigator.userAgent)
  menuActive = indexPath[0]
  if (elMenuRef) {
    try {
      document.createEvent('TouchEvent')
      menuKey++
    } catch (error) {
      /* empty */
    }
  }
  // menuKey++
}

const goHome = () => {
  router.push({
    path: '/',
    // name: 'home',
    query: {
      msg: 'hello'
    }
  })
}
</script>
<style scoped lang="scss">
$leftMenuWidth: 200px;

.top-menu {
  // width: 100%;
  height: 100%;
  display: flex;
  border-bottom: solid 1px var(--el-menu-border-color);
  background-color: var(--color-background);
  padding-left: 10px;
  padding-right: 10px;

  .menus-area {
    flex: 1;
    .el-menu {
      // width: 200px;
      height: 100%;
      border-bottom: 0;
    }
  }

  .build-version {
    width: 160px;

    text-align: center;
    text-align: center;
    line-height: 60px;

    .el-text {
      float: left;
      width: 60px;
    }

    .el-switch {
    }
  }

  //   active-text-color="#ffd04b" background-color="#545c64" text-color="#fff"
}
</style>
<style lang="scss" scoped>
// 使用prefers-color-scheme用户在网站中手动切换，
// @media (prefers-color-scheme: dark) {

//   .left-menu {
//     :deep(.el-menu) {
//       color: var(--color-text);
//       background-color: #545c64;

//       * {
//         color: var(--color-text);
//       }

//       .el-menu-item {
//         &:hover {
//           background-color: var(--color-border-hover);
//         }
//       }

//       .el-menu-item.is-active {
//         span {
//           color: #ffd04b !important;
//         }
//       }

//       .el-sub-menu__title {
//         &:hover {
//           background-color: var(--color-border-hover);
//         }
//       }
//     }
//   }
// }

html.dark {
  .top-menu {
    :deep(.el-menu) {
      // color: var(--color-text);
      // background-color: #545c64;
      // background-color: var(--color-shallow-bg);

      * {
        color: var(--color-text);
      }

      .el-menu-item {
        &:hover {
          background-color: var(--color-border-hover);
        }
      }

      .el-menu-item.is-active {
        span {
          color: #ffd04b !important;
        }
      }

      .el-sub-menu__title {
        &:hover {
          background-color: var(--color-border-hover);
        }
      }

      .el-icon {
        color: var(--color-text);
      }
    }
  }
}
</style>
